{"version": "2.0","name": "Feature Documentation","subline": "Epsilon HTML5 & CSS3 Framework","username": "Enabled","created": "","website": "http://www.enableds.com","update": "09/30/2014","update_today": true,"email": "ienabled@me.com","description": "Epsilon is not a framework that requires you to learn any new language. Epsilon will work with any framework on the market, be it Boostrap or Skeleton. Also, Epsilon is PhoneGap ready! \n\nIf you plan on using our templates for any appstore, regardless if you want to sell the app or put it up for free, you must purchase 2 extended licenses. Not doing so will result in a DMCA. \n\n","intro": "","button_1_text": "","button_2_text": "","button_3_text": "","button_1_url": "","button_2_url": "","button_3_url": "","sections": [{"title": "Structuring Elements","id": "structuring_elements","content": "<h4>\n\tContent Class</h4>\n<p>\tThe content class is the body of all our elements. This will house containers and columns. This class creates a left, right, and bottom margin and changes it&#39;s width on different devices to keep it responsive and beautiful.</p>\n<h4>\n\tContainer Class</h4>\n<p>\tThe container class is the hosing wrapper of a specific feature, this class makes the code more easily readable and at the same time adds a margin bottom to your elements. Inside the container classes the features explained bellow will be added.&nbsp;</p>\n<h4>\n\tControl Classes</h4>\n<p>\tControl classes are added to specific classes to give them a second set of properties.&nbsp;</p>\n<p>\t<b>left-text:</b> will make text align to the left</p>\n<p>\t<b>center-text:&nbsp;</b>will make text align to the center</p>\n<p>\t<strong>right-text:</strong> will make text align to the right</p>\n<p>\t<strong>no-bottom:</strong> this class can be added to any element to remove the margin bottom completely. This can be used for example if you have a paragraph inside a container</p>\n<p>\t<strong>half-bottom:</strong> this can be added to any element of the page, and it will use half the bottom of the main container class.&nbsp;</p>\n<p>\t<strong>full-bottom:</strong> this can be added to any element that you wish to have a full bottom. The bottom value is determined by the container class.&nbsp;</p>\n<p>\t<strong>responsive-image:</strong> when having an image on screen you wish to be fullly responsive and maintain aspect ratio, add the class responsive-image to it and it will automatically scale accordingly when changing resolutions.&nbsp;</p>\n<p>\t<strong>disabled:&nbsp;</strong>adding this class to any element will turn that element off, by setting it&#39;s css to display none.&nbsp;</p>\n<p>\t<b>uppercase:&nbsp;</b>adding this class will make your entire text uppercase</p>\n<p>\t<strong>lowercase:&nbsp;</strong>adding this class will make your entire text lowercase</p>\n<p>\t<b>regular-anchor</b>: if you don&#39;t want a link to change it&#39;s color, adding regular-anchor to it will make it take the color of it&#39;s parrent element.&nbsp;</p>\n<p>\t<strong>hide-if-responsive:</strong> this class can be added to any element you wish to hide on tablets but show on mobiles</p>\n<p>\t<strong>hide-if-mobile:&nbsp;</strong>this class can be added to any element you wish to hide on mobiles but show on tablets.</p>\n<p>\t&nbsp;</p>\n<h4>\n\tResponsive Classes</h4>\n<p>\tResponsive classes are columns and responsive columns that adapt according to resolutions. We&#39;ve set the breaking point at 768px, which is the default small size of a tablet. Under 768px you risk hitting devices like Phablets and Large Phones and making them switch to tablet resolution.</p>\n<p>\t<strong>Two Columns, Unresponsive Class.&nbsp;</strong></p>\n<p>\tReplace the &quot;CONTENT HERE&quot; zone with any feature you want, the code bellow will generate two columns on any resolutions. You must add last-column to the last one-half to make sure the margins are perfect.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;one-half&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;one-half last-column&quot;&gt;CONTENT HERE&lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t<strong>Three Columns, Unresponsive Class.</strong></p>\n<p>\tReplace the &quot;CONTENT HERE&quot; zone with any feature you want, the code bellow will generate two columns on any resolutions. You must add last-column to the last one-third to make sure the margins are perfect.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;one-third&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;one-third&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;one-third last-column&quot;&gt;CONTENT HERE&lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t<strong>Two Columns, Responsive Class.</strong></p>\n<p>\tReplace the &quot;CONTENT HERE&quot; zone with any feature you want, the code bellow will generate two columns, on a mobile device, they will show up as rows, so, unresponsive, but on tablets, they will show up as two columns, so, responsive.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;one-half-responsive&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;one-half-responsive last-column&quot;&gt;CONTENT HERE&lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t<strong>Three Columns, Responsive Class.</strong></p>\n<p>\tReplace the &quot;CONTENT HERE&quot; zone with any feature you want, the code bellow will generate two columns, on a mobile device, they will show up as rows, so, unresponsive, but on tablets, they will show up as two columns, so, responsive.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;one-third-responsive&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;one-third-responsive&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;one-half-responsive last-column&quot;&gt;CONTENT HERE&lt;/div&gt;\n&lt;/div&gt;</pre>\n<h4>\n\tSidebar Columns&nbsp;</h4>\n<p>\tSidebar columns are basically a column that&#39;s 25% the width of the screen and a column that&#39;s 75% the width of the screen. Sidebar columns will appear as one row on mobiles and as two columns on tablets.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;sidebar-right-big&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;sidebar-left-small&quot;&gt;CONTENT HERE&lt;/div&gt;\n&lt;/div&gt;\n\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;sidebar-left-big&quot;&gt;CONTENT HERE&lt;/div&gt;\n    &lt;div class=&quot;sidebar-right-small&quot;&gt;CONTENT HERE&lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "Responsive Classes","id": "responsive_classes","content": "<h4>\n\tResponsive Images</h4>\n<p>\tTo create a responsive image, follow the structure bellow</p>\n<pre class=\"html\">\n&lt;img src=&quot;images/img.jpg&quot; alt=&quot;img&quot; class=&quot;responsive-image&quot;&gt;</pre>\n<p>\t&nbsp;</p>\n<h4>\n\tResponsive Videos</h4>\n<p>\tTo create a responsive video, follow the structure bellow&nbsp;</p>\n<pre class=\"html\">\n<span class=\"webkit-html-tag\" style=\"font-family: monospace; font-size: medium; white-space: pre-wrap;\">&lt;iframe <span class=\"webkit-html-attribute-name\">class</span>=&quot;<span class=\"webkit-html-attribute-value\">responsive-video</span>&quot; <span class=\"webkit-html-attribute-name\">src</span>=&quot;video_address_link&quot;&gt;</span><span class=\"webkit-html-tag\" style=\"font-family: monospace; font-size: medium; white-space: pre-wrap;\">&lt;/iframe&gt;</span></pre>\n<p>\t&nbsp;</p>\n<h4>\n\tResponsive Maps</h4>\n<p>\tTo create a responsive map, go to google maps, get the embed code, and paste it in the iframe example bellow!&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;maps-container&quot;&gt;\n    &lt;iframe class=&quot;responsive-image maps&quot; src=&quot;https://maps.google.com/?ie=UTF8&amp;amp;ll=47.595131,-122.330414&amp;amp;spn=0.006186,0.016512&amp;amp;t=h&amp;amp;z=17&amp;amp;output=embed&quot;&gt;&lt;/iframe&gt;\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n"},{"title": "Typography Features","id": "typography_features","content": "<h4>\n\tText Highlights</h4>\n<p>\tText highlights will make a certain part of the text show up using a background. These are easy to use and are applied by adding a span class to the text you want highlighted. Please check the examples bellow. The span has the main class text-highlight that sets the proper spacings and the highlight-COLOR class that changes the color. Examples of colors can be seen in the code bellow, just copy and paste them to your desired location ( container )&nbsp;</p>\n<pre class=\"html\">\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-turqoise&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-green&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-blue&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-magenta&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-dark&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-yellow&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-red&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;\n&lt;p&gt;&lt;span class=&quot;text-highlight highlight-orange&quot;&gt;This is a highlight&lt;/span&gt;and this is the text&lt;/p&gt;</pre>\n<h4>\n\tPNG Icon Lists</h4>\n<p>\tAltough we also incorporated font-awesome&nbsp;http://fortawesome.github.io/Font-Awesome/icons/ in our project, we included some PNG icons as well. To generate a icon list, you must first create an unsorted list ( ul ) with the class name icon-list, then, to the list you want, add any of the following classes. ( check the example bellow )&nbsp;</p>\n<pre class=\"html\">\n&lt;ul class=&quot;icon-list&quot;&gt;\n    &lt;li class=&quot;address-list&quot;&gt;Address icon&lt;/li&gt;\n    &lt;li class=&quot;block-list&quot;&gt;Block icon&lt;/li&gt;\n    &lt;li class=&quot;bookmark-list&quot;&gt;Bookmark icon&lt;/li&gt;\n    &lt;li class=&quot;briefcase-list&quot;&gt;Briefcase icon&lt;/li&gt;\n    &lt;li class=&quot;bubble-list&quot;&gt;Bubble icon&lt;/li&gt;\n    &lt;li class=&quot;buy-list&quot;&gt;Buy icon&lt;/li&gt;\n    &lt;li class=&quot;calendar-list&quot;&gt;Calendar icon&lt;/li&gt;\n    &lt;li class=&quot;clipboard-list&quot;&gt;Clipboard icon&lt;/li&gt;\n    &lt;li class=&quot;clock-list&quot;&gt;Clock icon&lt;/li&gt;\n    &lt;li class=&quot;delete-list&quot;&gt;Delete icon&lt;/li&gt;\n    &lt;li class=&quot;diagram-list&quot;&gt;Diagram icon&lt;/li&gt;\n    &lt;li class=&quot;document-list&quot;&gt;Document icon&lt;/li&gt;\n    &lt;li class=&quot;down-list&quot;&gt;Down icon&lt;/li&gt;\n    &lt;li class=&quot;flag-list&quot;&gt;Flag icon&lt;/li&gt;\n    &lt;li class=&quot;folder-list&quot;&gt;Folder icon&lt;/li&gt;\n    &lt;li class=&quot;gear-list&quot;&gt;Gear icon&lt;/li&gt;\n    &lt;li class=&quot;globe-list&quot;&gt;Globe icon&lt;/li&gt;\n    &lt;li class=&quot;heart-list&quot;&gt;Heart icon&lt;/li&gt;\n    &lt;li class=&quot;help-list&quot;&gt;Help icon&lt;/li&gt;\n    &lt;li class=&quot;info-list&quot;&gt;Info icon&lt;/li&gt;\n    &lt;li class=&quot;key-list&quot;&gt;Key icon&lt;/li&gt;              \n    &lt;li class=&quot;left-list&quot;&gt;Left icon&lt;/li&gt;\n    &lt;li class=&quot;letter-list&quot;&gt;Letter icon&lt;/li&gt;\n    &lt;li class=&quot;monitor-list&quot;&gt;Monitor icon&lt;/li&gt;\n    &lt;li class=&quot;pencil-list&quot;&gt;Pencil icon&lt;/li&gt;\n    &lt;li class=&quot;plus-list&quot;&gt;Plus icon&lt;/li&gt;\n    &lt;li class=&quot;present-list&quot;&gt;Present icon&lt;/li&gt;\n    &lt;li class=&quot;print-list&quot;&gt;Print icon&lt;/li&gt;\n    &lt;li class=&quot;right-list&quot;&gt;Right icon&lt;/li&gt;\n    &lt;li class=&quot;save-list&quot;&gt;Save icon&lt;/li&gt;\n    &lt;li class=&quot;search-list&quot;&gt;Search icon&lt;/li&gt;\n    &lt;li class=&quot;shield-list&quot;&gt;Shield icon&lt;/li&gt;\n    &lt;li class=&quot;statistics-list&quot;&gt;Statistics icon&lt;/li&gt;\n    &lt;li class=&quot;stop-list&quot;&gt;Stop icon&lt;/li&gt;\n    &lt;li class=&quot;tick-list&quot;&gt;Tick icon&lt;/li&gt;\n    &lt;li class=&quot;trash-list&quot;&gt;Trash icon&lt;/li&gt;\n    &lt;li class=&quot;up-list&quot;&gt;Up icon&lt;/li&gt;\n    &lt;li class=&quot;user-list&quot;&gt;User icon&lt;/li&gt;\n    &lt;li class=&quot;wallet-list&quot;&gt;Walet icon&lt;/li&gt;\n    &lt;li class=&quot;warning-list&quot;&gt;Warning icon&lt;/li&gt;\n    &lt;li class=&quot;home-list&quot;&gt;Home icon&lt;/li&gt;\n    &lt;li class=&quot;label-list&quot;&gt;Label icon&lt;/li&gt;  \n&lt;/ul&gt;</pre>\n<h4>\n\tNormal Lists, Numbered Lists</h4>\n<p>\tRegular lists are vital, and the code for them is very simple. To create an ordered list class name your class ( ol class ) number-list, to create a regular list, name your class (ul class) normal-list.</p>\n<h4>\n\tStatic Notifications</h4>\n<p>\tStatic notifications are just background colored boxes used to attract the attention of the viewer. To create these classes, add them to a container and use the examples bellow.&nbsp;</p>\n<div>\n\t<pre class=\"html\">\n&lt;div class=&quot;static-notification-red&quot;&gt;\n    &lt;p class=&quot;center-text uppercase&quot;&gt;Red notification!&lt;/p&gt;\n&lt;/div&gt;</pre>\n\t<div>\n\t\tYou can choose between four colors just by switching the main class name from static-notification-red to green, yellow or blue.&nbsp;</div>\n\t<div>\n\t\t&nbsp;</div>\n\t<h4>\n\t\tTable&nbsp;</h4>\n\t<p>\t\tBy default, templates are responsive, but please keep in mind the reelestate of the screen you are adding the table to as you cannot add 50 columns to a 300 pixel width screen! Using tables implies the same old structure use since the begging of HTML, but just in case, we&#39;re adding the code here so you can copy and paste it to your page and edit from there on!&nbsp;</p>\n\t<pre class=\"html\">\n       &lt;table cellspacing=&#39;0&#39; class=&quot;table&quot;&gt;\n            &lt;tr&gt;\n                &lt;th&gt;TABLE&lt;/th&gt;\n                &lt;th class=&quot;table-title&quot;&gt;PLUS&lt;/th&gt;\n                &lt;th class=&quot;table-title&quot;&gt;PRO&lt;/th&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n                &lt;td class=&quot;table-sub-title&quot;&gt; ONE&lt;/td&gt;\n                &lt;td&gt;Yes&lt;/td&gt;\n                &lt;td&gt;Yes&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr class=&#39;even&#39;&gt;\n                &lt;td class=&quot;table-sub-title&quot;&gt; TWO&lt;/td&gt;\n                &lt;td&gt;No&lt;/td&gt;\n                &lt;td&gt;Yes&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n                &lt;td class=&quot;table-sub-title&quot;&gt; THREE&lt;/td&gt;\n                &lt;td&gt;No&lt;/td&gt;\n                &lt;td&gt;No&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr class=&#39;even&#39;&gt;\n                &lt;td class=&quot;table-sub-title&quot;&gt;VALUE&lt;/td&gt;\n                &lt;td class=&quot;price&quot;&gt;$9.&lt;sup class=&quot;small-price&quot;&gt;99&lt;/sup&gt;&lt;/td&gt;\n                &lt;td class=&quot;price&quot;&gt;$109.&lt;sup class=&quot;small-price&quot;&gt;99&lt;/sup&gt;&lt;/td&gt;\n            &lt;/tr&gt;       \n        &lt;/table&gt;</pre>\n\t<p>\t\t&nbsp;</p>\n</div>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "jQuery Features","id": "jquery_features","content": "<h4>\n\tTabs</h4>\n<p>\tResponsive tabs are simple to use.</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;tabs&quot;&gt;\n        &lt;a href=&quot;#&quot; class=&quot;tab-but tab-but-1 tab-active&quot;&gt;Tab 1&lt;/a&gt;\n        &lt;a href=&quot;#&quot; class=&quot;tab-but tab-but-2&quot;&gt;Tab 2&lt;/a&gt;   \n    &lt;/div&gt;\n    &lt;div class=&quot;tab-content tab-content-1&quot;&gt;\n        Tab Content\n    &lt;/div&gt;\n    &lt;div class=&quot;tab-content tab-content-2&quot;&gt;\n        Tab Content\n    &lt;/div&gt;\n&lt;/div&gt;    </pre>\n<div>\n\tThe tabs class creates the tab controls buttons. To create more tab buttons duplicate line 4 and replace tab-but-2 with tab-but-3, and keep adding numbers growing with each new tab. &nbsp;Also, when creating a new tab button add the tab-content tab-content-3 and keep adding growin numbers to each as more elements you add.&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<h4>\n\tSubmenus In Page</h4>\n<p>\tTo add more submenu items, duplicate the anchor classes.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;submenu-navigation&quot;&gt;\n    &lt;a href=&quot;#&quot; class=&quot;submenu-nav-deploy&quot;&gt;Deploy Submenu&lt;/a&gt;\n    &lt;div class=&quot;submenu-nav-items&quot;&gt;\n        &lt;a href=&quot;#&quot;&gt;Item 1&lt;/a&gt;\n        &lt;a href=&quot;#&quot;&gt;Item 2&lt;/a&gt;\n        &lt;a href=&quot;#&quot;&gt;Item 3&lt;/a&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</pre>\n<div>\n\t&nbsp;</div>\n<h4>\n\tToggles</h4>\n<p>\tYou can choose between 3 toggles, to switch between these toggles, replace toggle-1, deploy-toggle-1 with -2 and -3. For the toggle-3, be sure to add &nbsp;the following code inside the anchor. &lt;em&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/em&gt;&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;toggle-1&quot;&gt;\n        &lt;a href=&quot;#&quot; class=&quot;deploy-toggle-1&quot;&gt;This is content toggle&lt;/a&gt;\n        &lt;div class=&quot;toggle-content&quot;&gt;\n            Toggle Content Here\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</pre>\n<div>\n\t&nbsp;</div>\n<h4>\n\tBig Notifications</h4>\n<p>\tBig notifications cna be used when a user must see a large notice and these can be closed as well. You can chose between 4 color codes red, green, yellow and blue. replace COLOR-notifcation with the color you want from the four above.&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;big-notification red-notification&quot;&gt;\n    &lt;h4 class=&quot;uppercase&quot;&gt;Notification Title&lt;/h4&gt;\n    &lt;a href=&quot;#&quot; class=&quot;close-big-notification&quot;&gt;x&lt;/a&gt;\n    &lt;p&gt;A lot of nice stuff you want to write in this notification! It&#39;s simple to use and awesome!&lt;/p&gt;\n&lt;/div&gt;</pre>\n<div>\n\t&nbsp;</div>\n<h4>\n\tStatic Dismisable Notifications</h4>\n<p>\tStatic small notifications can be dismissed with a simple tap. These work the same as the features from the typography page and can be switched between four color codes, green, blue, yellow or red. Replace static-notification-COLOR with the color you wish.</p>\n<pre class=\"html\">\n&lt;div class=&quot;static-notification-red tap-dismiss-notification&quot;&gt;\n    &lt;p class=&quot;center-text uppercase&quot;&gt;A red notification! Dismiss!&lt;/p&gt;\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<div>\n\t&nbsp;</div>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "Other Features","id": "other_features","content": "<h4>\n\tSImple Buttons</h4>\n<p>\tNot much to be explained here, these are button classes, copy and paste them where you need them.&nbsp;</p>\n<pre class=\"html\">\n&lt;a href=&quot;#&quot; class=&quot;button button-red&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-green&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-blue&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-magenta&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-tea&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-yellow&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-orange&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-light&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-grey&quot;&gt;Button&lt;/a&gt;  \n&lt;a href=&quot;#&quot; class=&quot;button button-dark&quot;&gt;Button&lt;/a&gt;  \n&lt;a href=&quot;#&quot; class=&quot;button button-red&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-green&quot;&gt;Button&lt;/a&gt;           </pre>\n<h4>\n\t3D Button Classes</h4>\n<p>\t3D Buttons have a darker 4 pixel stroke beneeth them to give them a three dimensional effect. Just copy and paste them where you need them.</p>\n<pre class=\"html\">\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-red red-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-green green-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-blue blue-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-magenta magenta-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-tea tea-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-yellow yellow-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-orange orange-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-light light-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-grey grey-3d&quot;&gt;Button&lt;/a&gt;    \n&lt;a href=&quot;#&quot; class=&quot;button-3d button-dark dark-3d&quot;&gt;Button&lt;/a&gt;  \n&lt;a href=&quot;#&quot; class=&quot;button-3d button-red red-3d&quot;&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button-3d button-green green-3d&quot;&gt;Button&lt;/a&gt; </pre>\n<div>\n\t&nbsp;</div>\n<h4>\n\tFont Awesome Buttons</h4>\n<p>\tThe font awesome class (&nbsp;http://fortawesome.github.io/Font-Awesome/icons/ &nbsp;4.1.0 curent version ) allows you to import icons by simply adding the &lt;i class=&quot;fa fa-ICON-NAME&quot;&gt;&lt;/i&gt; to your button. Check the link to see all icons available. Make sure you copy and paste the icon name corectly. In case you see that an icon is not displayed, it means that font-awesome has updated their classes and you need to update the font-awesome.css file.&nbsp;</p>\n<p>\tWe won&#39;t be updating our files just for font-awesome.css because it would be a logistical nightmare to update all our 60+ files for just one CSS. Updating the class is extremely simple. Open&nbsp;http://fortawesome.github.io/Font-Awesome/ , download the pack, extract the file, (make a backup of font-awesome.css from our styles folder then ) replace font-awesome.css in our item, with the font-awesome.css you&#39;ve just downloaded! Voila! Font awsome has been updated!&nbsp;</p>\n<p>\tIn case this method does not work, revert to the old font-awesome you&#39;ve just backed up and send us a message. We will fix the issue in less than 24 hours and give you a free update!&nbsp;</p>\n<pre class=\"html\">\n&lt;a href=&quot;#&quot; class=&quot;button button-red&quot;&gt;&lt;i class=&quot;fa fa-navicon&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-green&quot;&gt;&lt;i class=&quot;fa fa-life-saver&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-blue&quot;&gt;&lt;i class=&quot;fa fa-paw&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-magenta&quot;&gt;&lt;i class=&quot;fa fa-camera&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-tea&quot;&gt;&lt;i class=&quot;fa fa-cog&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-yellow&quot;&gt;&lt;i class=&quot;fa fa-picture-o&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-orange&quot;&gt;&lt;i class=&quot;fa fa-question&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-light&quot;&gt;&lt;i class=&quot;fa fa-exclamation&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;\n&lt;a href=&quot;#&quot; class=&quot;button button-grey&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;         \n&lt;a href=&quot;#&quot; class=&quot;button button-dark&quot;&gt;&lt;i class=&quot;fa fa-angle-left&quot;&gt;&lt;/i&gt;Button&lt;/a&gt;  </pre>\n<div>\n\t&nbsp;</div>\n<h4>\n\tSpeach Bubbles</h4>\n<p>\tThe following code must be added in a container.&nbsp;</p>\n<div>\n\t<pre class=\"html\">\n&lt;em class=&quot;speach-left-title&quot;&gt;John Doe says:&lt;/em&gt;\n&lt;p class=&quot;speach-left&quot;&gt;This is just an awesome bubble! It&#39;s quite cute isn&#39;t it?&lt;/p&gt;\n\n&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;\n\n&lt;em class=&quot;speach-right-title&quot;&gt;Jane Doe replied:&lt;/em&gt;\n&lt;p class=&quot;speach-right blue-bubble&quot;&gt;Yeap! It&#39;s awesome isn&#39;t it and it&#39;s not that hard to use! And they act like bubbles, only expanding to 75% of width!&lt;/p&gt;\n\n&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;  </pre>\n\t<p>\t\tOnce you&#39;ve copied the code above, replace the text you need with yours. The top code will create a left speach bubble, the bottom code will create a right speach bubble. Copy and paste as many times as many bubbles you need.&nbsp;</p>\n\t<h4>\n\t\tDevice Specific Classes</h4>\n\t<p>\t\tDevice specific classes will apear only for the device that browse them. We&#39;ve added android, ipod, ipad, and iphones to the mix, because these represent 99% of the mobile marketshare. To change the device, simply replace the main class DEVICE-detected with android, ipod, iphone, or ipad.</p>\n\t<p>\t\tWe&#39;ve made a small design for you, but inside the DEVICE-detected class you can add whatever content you wish to display for that specific platform.&nbsp;</p>\n\t<pre class=\"html\">\n&lt;div class=&quot;android-detected&quot;&gt;\n    &lt;div class=&quot;detected-wrapper&quot;&gt;\n        &lt;img src=&quot;images/detector/android.png&quot; alt=&quot;img&quot;&gt;\n        &lt;h4&gt;Get it on Google Play&lt;/h4&gt;\n        &lt;em&gt;For your Android Device&lt;/em&gt;\n        &lt;p&gt;\n            This is a demo box, included in the template, but you can detect Androids\n            and add whatever text or element appear for that platform only!\n        &lt;/p&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</pre>\n\t<div>\n\t\t&nbsp;</div>\n</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<p>\t&nbsp;</p>\n"},{"title": "Portfolios","id": "portfolios","content": "<h4>\n\tOne Item Portfolio</h4>\n<p>\tInside the content class, create a class called portfolio-one, and inside it, add the following code to create a portfolio item. You can duplicate the code bellow to create more items.&nbsp;</p>\n<div>\n\t<pre class=\"html\">\n&lt;div class=&quot;portfolio-one-item full-bottom&quot;&gt;\n    &lt;div class=&quot;portfolio-one-image&quot;&gt;\n        &lt;a href=&quot;images/pictures/3.jpg&quot; class=&quot;swipebox&quot; title=&quot;Caption Here&quot;&gt;\n            &lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;\n        &lt;/a&gt;\n        &lt;img src=&quot;images/pictures/3.jpg&quot; class=&quot;responsive-image&quot;&gt;\n    &lt;/div&gt;\n\n    &lt;div class=&quot;portfolio-one-text&quot;&gt;\n        &lt;h3 class=&quot;title&quot;&gt;Portfolio Item&lt;/h3&gt;\n        &lt;em class=&quot;subtitle&quot;&gt;Awesome one column portfolio&lt;/em&gt;\n        &lt;div class=&quot;portfolio-one-details&quot;&gt;\n            &lt;a href=&quot;#&quot;&gt;10 September 2055&lt;/a&gt;\n            &lt;a href=&quot;#&quot;&gt;Mobile&lt;/a&gt;\n            &lt;a href=&quot;#&quot;&gt;Envato Item&lt;/a&gt;\n        &lt;/div&gt;\n        &lt;p class=&quot;half-bottom&quot;&gt;\n            Lorem ipsum dolor sit amet, consectetur est adipiscing elit. Pellentesque lacus ex,\n            sollid um facilisis elementum quis, vulputate nec urna. In scelerisque tincidunt \n            enim, eutsmax. \n        &lt;/p&gt;            \n        &lt;div class=&quot;portfolio-one-links&quot;&gt;\n            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt; Visit Project&lt;/a&gt;\n            &lt;a href=&quot;#&quot;&gt;Details &lt;i class=&quot;fa fa-link&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n        &lt;/div&gt; \n    &lt;/div&gt;       \n&lt;/div&gt;</pre>\n\t<div>\n\t\tLine 1 creates the hosing box for the portfolio item.&nbsp;</div>\n\t<div>\n\t\tLine 2 creates the portfolio one image wrapper.</div>\n\t<div>\n\t\tLine 3 4 5 6 creates the swipebox gallery wrapper, inside of this there is the plus icon.</div>\n\t<div>\n\t\tLines 9 to 26 house the portfolio title, subtitle, details, text and links. Replace them acording to your needs!&nbsp;</div>\n\t<div>\n\t\t&nbsp;</div>\n\t<h4>\n\t\tTwo Item Portfolio</h4>\n\t<p>\t\tInside the content class, create a class called portfolio-two, and inside it, add the following code to create a portfolio item. You can duplicate the code bellow to create more items.&nbsp;</p>\n\t<pre class=\"html\">\n&lt;div class=&quot;portfolio-two-item full-bottom&quot;&gt;\n    &lt;div class=&quot;portfolio-two-image&quot;&gt;\n        &lt;a href=&quot;images/pictures/3.jpg&quot; class=&quot;swipebox&quot; title=&quot;Caption Here&quot;&gt;\n            &lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;\n        &lt;/a&gt;\n        &lt;img src=&quot;images/pictures/3s.jpg&quot; class=&quot;responsive-image&quot;&gt;\n    &lt;/div&gt;\n\n    &lt;div class=&quot;portfolio-two-text&quot;&gt;\n        &lt;h3 class=&quot;title&quot;&gt;Portfolio Item&lt;/h3&gt;\n        &lt;em class=&quot;subtitle&quot;&gt;Portfolio items placed on multiple columns.&lt;/em&gt;\n        &lt;p class=&quot;half-bottom&quot;&gt;\n            Lorem ipsum dolor sit amet, consecte tur est adipiscing elit. Lacus \n            sollid um facilisis eleme quis, vulputat nec. \n        &lt;/p&gt;            \n        &lt;div class=&quot;portfolio-two-links&quot;&gt;\n            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt; Visit Project&lt;/a&gt;\n        &lt;/div&gt; \n    &lt;/div&gt;       \n&lt;/div&gt;</pre>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\tThe second portfolio follows the same rules as the first one, same code manages it, only the way it reacts in responsive screen differes.&nbsp;</div>\n\t<h4>\n\t\tWide Portfolio</h4>\n\t<pre class=\"html\">\n&lt;div class=&quot;portfolio-wide&quot;&gt;\n    &lt;a href=&quot;#&quot; class=&quot;portfolio-wide-item&quot;&gt;\n   <span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>    &lt;h3&gt;Swing near the ocean&lt;/h3&gt;\n        &lt;p&gt;This is a wide item, just tap it to read more&lt;/p&gt;\n   <span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>    &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n        &lt;img class=&quot;responsive-image&quot; src=&quot;images/pictures/1ww.jpg&quot; alt=&quot;img&quot;&gt;\n    &lt;/a&gt;\n&lt;/div&gt;</pre>\n\t<p>\t\tTo make more wide items, duplicate the anchor class.</p>\n\t<p>\t\tLine 3 creates the wide portfolio title.</p>\n\t<p>\t\tLine 4 creates the wide portfolio text</p>\n\t<p>\t\tLine 5 creates the overlay for the image</p>\n\t<p>\t\tLine 6 creates the image itself.&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n</div>\n<p>\t&nbsp;</p>\n"},{"title": "Galleries","id": "galleries","content": "<h4>\n\tRound and Square Thumbnail Gallery</h4>\n<pre class=\"html\">\n&lt;ul class=&quot;gallery round-thumb&quot;&gt;\n    &lt;li&gt;\n        &lt;a class=&quot;swipebox&quot; href=&quot;images/pictures/1.jpg&quot; title=&quot;An awesome gallery!&quot;&gt;\n            &lt;img src=&quot;images/pictures/1s.jpg&quot; alt=&quot;img&quot; /&gt;\n        &lt;/a&gt;\n    &lt;/li&gt;\n&lt;/ul&gt;</pre>\n<div>\n\tTo change the style of the gallery from round to square, relace the round-thumb with square thumb.</div>\n<div>\n\tTo add more images, simply duplicate the list class. The title of the anchor represents the image caption.&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<h4>\n\tWide Gallery</h4>\n<pre class=\"html\">\n&lt;div class=&quot;portfolio-wide&quot;&gt;\n    &lt;a href=&quot;images/pictures/1.jpg&quot; class=&quot;swipebox portfolio-wide-item&quot; titlte=&quot;caption here&quot;&gt;\n       <span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>&lt;h3&gt;Swing near the ocean&lt;/h3&gt;\n        &lt;p&gt;This is a wide item, just tap it to read more&lt;/p&gt;\n       <span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>&lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n        &lt;img class=&quot;responsive-image&quot; src=&quot;images/pictures/1ww.jpg&quot; alt=&quot;img&quot;&gt;\n    &lt;/a&gt;\n&lt;/div&gt;</pre>\n<p>\tThe wide gallery is the exact same thing as a portfolio, only, it houses the swipebox class inside the main anchor.&nbsp;</p>\n"},{"title": "Pages","id": "pages","content": "<h4>\n\t404 Error Page</h4>\n<pre class=\"html\">\n&lt;div class=&quot;coverpage coverpage-bg3 coverpage-error&quot;&gt;\n    &lt;div class=&quot;coverpage-content&quot;&gt;\n    <span class=\"Apple-tab-span\" style=\"white-space:pre\"> </span>    &lt;h1&gt;404&lt;/h1&gt;\n            &lt;h4&gt;You&#39;re on the wrong page!&lt;/h4&gt;\n            &lt;p&gt;\n                We&#39;re either building this page now, and you&#39;re \n                here too soon, or the page doesn&#39;t exist! So\n                how about going back home?\n            &lt;/p&gt;\n            &lt;a class=&quot;coverpage-button&quot; href=&quot;#&quot;&gt;Homepage&lt;/a&gt;\n        &lt;/div&gt;\n    &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\tThis code generates the 404 page. It should be outside the content. We suggest not including a footer on these pages</p>\n<p>\tLine 1 creates the coverpaage, meaning, the 100% height of the page, this has the class coverpage-bg3 which is the background image. To edit and replace the background image, open framework.css and find (ctrl + f or cmd + f ) .coverpage-bg3, replace the image there with your own.&nbsp;</p>\n<p>\tLine 3 is the main title</p>\n<p>\tLine 4 is the small title</p>\n<p>\tLine 5 to 9 is the 404 page text</p>\n<p>\tLine 10 is the button to direct users back to a page you desire.&nbsp;</p>\n<p>\t&nbsp;</p>\n<h4>\n\tUnder Construction Page</h4>\n<p>\t&nbsp;</p>\n<pre class=\"html\">\n&lt;div class=&quot;coverpage coverpage-bg4 coverpage-construction&quot;&gt;\n    &lt;div class=&quot;coverpage-content&quot;&gt;\n        &lt;h1&gt;Coming Soon&lt;/h1&gt;\n        &lt;h4&gt;We&#39;re still building this page&lt;/h4&gt;\n        &lt;p&gt;\n            This page is curently under construction, but feel\n            free to check it later we&#39;ll have it complete realy soon!\n        &lt;/p&gt;\n        &lt;div class=&quot;countdown&quot;&gt;\n            &lt;!-- Time Generated By Custom.JS --&gt;\n        &lt;/div&gt;\n        &lt;a class=&quot;coverpage-button&quot; href=&quot;#&quot;&gt;Homepage&lt;/a&gt;\n    &lt;/div&gt;\n    &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\tThe same principle of placing the construction page applies as for the 404 page&nbsp;</p>\n<p>\tLine 3 is the main title</p>\n<p>\tline 4 is the main sub title</p>\n<p>\tline 5 is the text</p>\n<p>\tline 9 to 11 is the countdown timer, you can open custom.js and locate the countdown code, it&#39;s on the top lines. Replace the date there with yours.</p>\n<p>\tLine 12 is the button to redirect users wherever you want them!&nbsp;</p>\n<p>\t&nbsp;</p>\n<h4>\n\tProfile Header</h4>\n<pre class=\"html\">\n&lt;div class=&quot;profile-header full-bottom&quot;&gt;\n    &lt;div class=&quot;profile-header-contents&quot;&gt;\n        &lt;img class=&quot;profile-header-logo&quot; src=&quot;images/pictures/3s.jpg&quot; alt=&quot;img&quot;&gt;\n        &lt;h4 class=&quot;profile-header-heading&quot;&gt;John Doe&lt;/h4&gt;\n        &lt;em class=&quot;profile-header-subheading&quot;&gt;Professional Consultant&lt;/em&gt;\n        &lt;div class=&quot;profile-header-socials&quot;&gt;\n            &lt;a href=&quot;#&quot;&gt;\n                &lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;/i&gt;\n                5k+ Likes\n            &lt;/a&gt;\n            &lt;a href=&quot;#&quot;&gt;\n                &lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;\n                9k+ Followers   \n            &lt;/a&gt;\n            &lt;a href=&quot;#&quot;&gt;\n                &lt;i class=&quot;fa fa-google-plus&quot;&gt;&lt;/i&gt;\n                2.5k + Plus\n            &lt;/a&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div class=&quot;profile-header-background&quot;&gt;&lt;/div&gt;\n    &lt;div class=&quot;profile-header-overlay&quot;&gt;&lt;/div&gt;\n&lt;/div&gt;</pre>\n<div>\n\t&nbsp;</div>\n<div>\n\tThis creates a profile header page, with a large background image at the top and a logo. Let&#39;s explain the code.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tThis section should be place outside the content class. It wil allow it to strech to fullscreen.&nbsp;</div>\n<div>\n\tLine 3 creates the profile header icon, inside framework.css search (ctrl + f or cmd + f ) profile-header-logo and replace the width and height of the image with yours&nbsp;</div>\n<div>\n\tLine 4 is the text under the logo. The title</div>\n<div>\n\tLine 5 is the text under the main text. The subtitle</div>\n<div>\n\tLine 6 to line 20 create the social icons. Remember! This is just a template. the system to pull data from social networks is PHP and server side based!&nbsp;</div>\n<div>\n\tLine 21 is the header background. Open framework.css and locate profile-header-background. Once you&#39;ve done that replace the image there with what image you wish&nbsp;</div>\n<div>\n\tLine 22 is the black overlay. We added this to make the text more readable.&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<h4>\n\tUpdates Page</h4>\n<p>\tThe following code creates a notification that uses a image for the icon. &nbsp;Replace the second line image with an image you desire.&nbsp;</p>\n<pre class=\"html\">\n&lt;p class=&quot;notification-page-item&quot;&gt;\n    &lt;img src=&quot;images/pictures/1s.jpg&quot; alt=&quot;img&quot;&gt;\n    &lt;em&gt;\n        Site outage for update. More updates soon. Tap read more for further information.\n    &lt;/em&gt;\n    &lt;a href=&quot;#&quot;&gt;Read More&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;15th July 2016&lt;/a&gt;\n&lt;/p&gt;</pre>\n<div>\n\t&nbsp;</div>\n<div>\n\tThe code bellow generates a notification that uses a font awesome icon. You can use any icon found in the font awesome pack. We added the background there for you just to replace with casual hex colors.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<pre class=\"html\">\n&lt;p class=&quot;notification-page-item&quot;&gt;\n    &lt;i class=&quot;fa fa-facebook&quot; style=&quot;background-color:#3B5998;&quot;&gt;&lt;/i&gt;\n    &lt;em&gt;\n        We just launched a Facebook page, for news and updates, go ahead and like our page.\n    &lt;/em&gt;\n    &lt;a href=&quot;#&quot;&gt;Like our Page&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;15th July 2016&lt;/a&gt;\n&lt;/p&gt;</pre>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\tColor notitifications can be used to have the default colors of basic notifications, so replacing the yellow-notification in the example bellow with blue-notification, green-notification or red-notification will change the icon background color. For icons, use anything you&#39;d like from the font awesome library!&nbsp;</div>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\t<pre class=\"html\">\n&lt;p class=&quot;notification-page-item&quot;&gt;\n    &lt;i class=&quot;fa fa-warning yellow-notification&quot;&gt;&lt;/i&gt;\n    &lt;em&gt;\n        Important notifications here! Just a simple class, copy and paste it and you&#39;re ready!\n    &lt;/em&gt;\n    &lt;a href=&quot;#&quot;&gt;Follow on Twitter&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;15th July 2016&lt;/a&gt;\n&lt;/p&gt;  </pre>\n\t\t<div>\n\t\t\t&nbsp;</div>\n\t</div>\n</div>\n<h4>\n\t&nbsp;</h4>\n<p>\t&nbsp;</p>\n"},{"title": "Ending Words","id": "ending_words","content": "<p>\tThis documentation is made for the page features, but the first documentation will cover the navigation, header, changing logos and more details that are independent to each template.&nbsp;</p>\n<p>\t&nbsp;</p>\n<h4>\n\tWhere do I get hands on support?&nbsp;</h4>\n<p>\tThat&#39;s simple. Send us a message using this form -&gt; http://enableds.com/html-support/</p>\n<p>\t&nbsp;</p>\n<h4>\n\tPlease rate 5 stars!&nbsp;</h4>\n<p>\tIf there is something wrong with the file, we&#39;ll help you, if there are features ( and by features we don&#39;t mean things like creating a new social network for you that competes with facebook ) we&#39;ll most likely add that too, and usually for free! If there is anything we can do to help, we will, plus, you got a mobile app like interface template for 10$. A 5 star rating will not hurt you, and it will only take a minute to give, but it will help us more than you can imagine! So thnak you in advance for your purchase and your rating!&nbsp;</p>\n<p>\tLet us know if we can help you at&nbsp;http://enableds.com/html-support/</p>\n"}],"use_sub": true,"logo": "","favicon": "","customcss": "","easing": "swing","easingduration": "500","bgimage": "","bgrepeat": "repeat","bgattachment": "scroll","bgcolor": "FFFFFF","textcolor": "383838","linkcolor": "0000FF","hrcolor1": "EBEBEB","hrcolor2": "FFFFFF","btncolor": "FFFFFF","btncolor1": "0088CC","btncolor2": "0044CC","sidebarbgimage": "","sidebarbgrepeat": "repeat","sidebarbgcolor": "DDDDDD","sidebartextcolor": "222222","sidebarlinkcolor": "444444","sidebaractivecolor": "444444","sidebaractivetextcolor": "DDDDDD","sidebarhrcolor1": "AAAAAA","sidebarhrcolor2": "EEEEEE","cufon": "","documentationttype": "default","itemURL": "","sendJSON": "","sendZIP": "","sendPWD": ""}